<template>
	<div v-loading="loading">
		<div class="containerBox">
			<div class="container">
				<div class="chunk">
					<div class="title">基础信息</div>
					<div class="container_detail">
						<FormItems
							v-model="infoData"
							:form="formList.infoList"
							state="readonly"
							labelWidth="100px">
							<template #earnCode="scope">
								<el-link type="primary" @click="toDetail(scope.row)">
									{{ scope.row.earnCode || '-' }}
								</el-link>
							</template>
						</FormItems>
					</div>
				</div>
				<div class="chunk">
					<div class="title">收款信息</div>
					<div class="container_detail">
						<FormItems
							v-model="infoData"
							:form="formList.priceInfoList"
							state="readonly"
							labelWidth="100px"></FormItems>
					</div>
				</div>
				<div
					class="chunk"
					v-if="infoData.ncPushRecordingList && infoData.ncPushRecordingList.length > 0">
					<div class="title">NC同步记录</div>
					<div class="container_table">
						<el-table :data="infoData.ncPushRecordingList" border stripe>
							<el-table-column label="业务单号">
								<template slot-scope="scope">
									<TooltipDiv :content="scope.row.earnCode">
										<template #content>
											<div v-for="item in getEarnCode(scope.row.earnCode)">
												{{ item }}
											</div>
										</template>
									</TooltipDiv>
								</template>
							</el-table-column>

							<TableColumn
								v-for="item in tableNCColumn"
								:cellOptions="item"></TableColumn>
							<el-table-column label="失败原因">
								<template slot-scope="scope">
									<TooltipDiv :content="scope.row.reasonForFailure">
										<template #content>
											{{ scope.row.reasonForFailure }}
										</template>
									</TooltipDiv>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<div
					class="chunk"
					v-if="infoData.earningStreamList && infoData.earningStreamList.length > 0">
					<div class="title">收款流水</div>
					<div class="container_table">
						<el-table :data="infoData.earningStreamList" border stripe>
							<TableColumn
								v-for="item in tableCollectionTableColumn"
								:cellOptions="item"></TableColumn>
							<!-- </el-table-column> -->
							<el-table-column label="收款凭证" align="center">
								<template slot-scope="scope">
									<!-- v-if=" -->
									<!-- notEmpty(scope.row.earningProve) -->
									<!-- " -->
									<div class="handle">
										<image-common
											v-model="scope.row.earningProve"
											:disabled="notEmpty(scope.row.earningProve)"
											:fileType="['png', 'jpg', 'jpeg']"
											:limit="1"
											:upType="2"
											@uploadEnd="uploadEnd(...arguments, scope.row)" />
									</div>
									<!-- <div v-else>-</div> -->
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<div
					class="chunk"
					v-if="infoData.proceedsInvoiceList && infoData.proceedsInvoiceList.length > 0">
					<div class="title">发票信息</div>
					<div class="container_detail">
						<div class="empty" v-if="infoData.proceedsInvoiceList.length == 0">
							暂无数据~
						</div>
						<div
							class="container_invoice"
							v-for="item in infoData.proceedsInvoiceList"
							:key="item.invoiceId">
							<div class="preview">
								<div class="container_preview">
									<div class="image">
										<!-- <ImagePreview -->
										<!-- :src="'http://139.159.183.71:12081/jms/2023/12/21/7fe708060e5d4d47a996e38c9e4dac80.png'" -->
										<!-- width="100%" -->
										<!-- height="100%" -->
										<!-- ></ImagePreview> -->
										<image-common
											v-model="item.invoiceImg"
											:disabled="true"
											:upType="2" />
									</div>
								</div>
							</div>
							<div class="container_content">
								<div class="item">
									<div class="label">发票类型：</div>
									<div class="content">
										{{
											item.invoiceType
												| getInvoiceType(dict.type.invoice_type)
										}}
									</div>
								</div>
								<div class="item">
									<div class="label">客户编码：</div>
									<div class="content">
										{{ item.customerCode || '-' }}
									</div>
								</div>
								<div class="item">
									<div class="label">客户名称：</div>
									<div class="content">
										{{ item.customerName || '-' }}
									</div>
								</div>
								<div class="item">
									<div class="label">纳税人识别号：</div>
									<div class="content">
										{{ item.taxpayerId || '-' }}
									</div>
								</div>
								<div class="item">
									<div class="label">客户地址：</div>
									<div class="content">
										{{ item.customerAddr || '-' }}
									</div>
								</div>
								<div class="item">
									<div class="label">客户银行账号：</div>
									<div class="content">
										{{ item.customerBankAccountName || '-' }}
									</div>
								</div>
								<div class="item">
									<div class="label">开票金额：</div>
									<div class="content">
										{{ item.invoiceAmount || '-' }}
									</div>
								</div>
								<div class="item">
									<div class="label">税额：</div>
									<div class="content">
										{{ item.taxAmount || '-' }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<A-FlowRecord :id="processId"></A-FlowRecord>
			</div>
		</div>
		<div class="back">
			<el-button @click="back">返回</el-button>
		</div>
	</div>
</template>
<script>
	import { OrderCar, OrderParam } from '@/api/finance/manage/collect/api.js';
	import * as apis from '@/api/finance/manage/collectDetail/api.js';
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	import TableColumn from '@/views/finance/manage/tableColumn/index.vue';
	import TooltipDiv from '@/components/A/A-form/tooltipDiv/index.vue';
	export default {
		name: 'CollectDetail',
		components: { FormItems, TableColumn, TooltipDiv },
		mixins: [],
		dicts: ['finance_proceeds_type', 'finance_payment_type', 'invoice_type'],
		props: {},
		data() {
			return {
				loading: false,
				infoData: {
					proceedsInvoiceList: [],
				},
				table: {
					NC: {
						dataList: [],
						total: 0,
						queryParams: {
							pageNum: 1,
							pageSize: 10,
						},
						tableColumn: [],
					},
					collection: {
						dataList: [],
						total: 0,
						queryParams: {
							pageNum: 1,
							pageSize: 10,
						},
						tableColumn: [],
					},
				},
			};
		},
		filters: {
			getInvoiceType(val, list) {
				let item = list?.find(e => e.value == val);
				if (item) {
					return item.label;
				}
				return '-';
			},
			getProceedsType(row) {
				let word = '-';
				switch (row) {
					case 0:
						word = '押金';
						break;
					case 1:
						word = '租金';
						break;
					case 2:
						word = '首付款';
						break;
					case 3:
						word = '尾款';
						break;
					case 4:
						word = '处置款';
						break;
					case 5:
						word = '滞纳金';
						break;
					default:
						word = row;
				}
				return word;
			},
		},
		computed: {
			formList() {
				return {
					infoList: [
						{
							label: '应收单号',
							prop: 'proceedsCode',
						},
						{ label: '车牌号', prop: 'carCode' },
						{
							label: '业务单号',
							type: 'empty',
							prop: 'earnCode',
							slot: 'earnCode',
						},
						{ label: '业务类型', prop: 'earnTypeStr' },
						{ label: '车辆来源', prop: 'carSource' },
						{ label: '客户', prop: 'earnCustomerName' },
						{
							label: '车辆所属公司',
							prop: 'carAppertainCompany',
						},
						{ label: '车辆运营公司', prop: 'carRunCompany' },
						{ label: '开票状态', prop: 'ticketStatusStr' },
						{ label: '收款状态', prop: 'checkStateStr' },
						{
							label: '付款方式',
							prop: 'paymentMethodStr',
							format(row) {
								if (row.proceedsType == 4 || row.proceedsType == 14) return '-';
								return row?.paymentMethodStr;
							},
						},
					],
					priceInfoList: [
						{ label: '所属月份', prop: 'affiliationMonth' },
						{
							label: '收款银行',
							prop: 'paymentBank',
						},
						{
							label: '应收类型',
							prop: 'proceedsType',
							type: 'select',
							selectList: this.dict.type.finance_proceeds_type,
							state: 'readonly',
						},
						{
							label: '期数',
							prop: 'periodsNum',
							format(row) {
								if (row.proceedsType == 4 || row.proceedsType == 14) return '-';
								return row?.periodsNum;
							},
						},
						{
							label: '应收金额',
							prop: 'receivableAmount',
							format: row => {
								return this.format_thousand(row.receivableAmount);
							},
						},
						{
							label: '待收金额',
							prop: 'waitAmount',
							format: row => {
								return this.format_thousand(row.waitAmount);
							},
						},
						{
							label: '已收金额',
							prop: 'receivedAmount',
							format: row => {
								return this.format_thousand(row.receivedAmount);
							},
						},
						{
							label: '应收时间',
							format: row => {
								return this.A_formatTime(row.accountantBillDate, 0);
							},
						},
						{
							label: '逾期时间',
							format: row => {
								return this.A_formatTime(row.repaymentTime, 0);
							},
						},
						{ label: '逾期天数', prop: 'overdueDay' },
						{ label: '核销状态', prop: 'checkStateStr' },
						{
							label: '收款时间',
							format: row => {
								return this.A_formatTime(row.paymentTime, 0);
							},
						},
						{
							label: '支付方式',
							prop: 'paymentType',
							type: 'dict',
							dict: this.dict?.type?.finance_payment_type ?? [],
						},
					],
				};
			},
			processId() {
				return this.$route.query.processId || this.infoData?.processId;
			},
			tableNCColumn() {
				return [
					{
						label: '所属公司',
						prop: 'carAppertainCompany',
					},
					{
						label: 'POST',
						prop: 'carAppertainCompany',
					},
					{
						label: '业务类型',
						prop: 'earnType',
					},
					{
						label: '推送类型',
						prop: 'pushType',
					},
					{
						label: '推送时间',
						prop: 'pushDate',
					},
					{
						label: '推送状态',
						prop: 'pushState',
					},
				];
			},
			tableCollectionTableColumn() {
				return [
					{
						label: '收款时间',
						prop: 'earningDate',
					},
					{
						label: '收款方式',
						prop: 'earningTypeStr',
					},
					{
						label: '应收金额',
						format: row => {
							return this.format_thousand(row.receivableAmount);
						},
						// prop: "receivableAmount",
					},
					{
						label: '收款金额',
						format: row => {
							return this.format_thousand(row.receivedAmount);
						},
						// prop: "receivedAmount",
					},
					{
						label: '剩余未收',
						format: row => {
							return this.format_thousand(row.waitAmount);
						},
						// prop: "waitAmount",
					},
				];
			},
		},
		watch: {},
		created() {
			this.getInfoData();
		},
		methods: {
			getEarnCode(val) {
				if (this.Empty(val)) {
					return [];
				}
				return val?.split(',');
			},
			uploadEnd(state, row) {
				console.log(state, row);
				if (state === 'success') {
					let params = { ...row };
					apis.Save(params).then(res => {
						if (res.code == 200) {
							this.$message({
								message: '上传成功',
								type: 'success',
							});
						}
					});
				}
			},
			getOrderCar(orderCarId) {
				if (this.Empty(orderCarId)) return;
				return new Promise(resolve => {
					OrderCar(orderCarId)
						.then(res => {
							if (res.code == 200) {
								resolve(res.data);
							} else {
								throw new Error(res);
							}
						})
						.catch(err => resolve());
				});
			},
			getOrderParam(orderCode) {
				if (this.Empty(orderCode)) return;
				return new Promise(resolve => {
					OrderParam(orderCode)
						.then(res => {
							if (res.code == 200) {
								resolve(res.data);
							} else {
								throw new Error(res);
							}
						})
						.catch(err => resolve());
				});
			},
			async toDetail(row) {
				try {
					let { proceedsType, earnCode, earnId } = row;
					if (this.Empty(proceedsType)) return;
					this.$modal.loading('正在跳转中，请稍后...');
					let route = {};
					switch (proceedsType?.toString()) {
						// 租金 子订单
						case '1':
							let data1 = await this.getOrderCar(earnId);
							if (this.notEmpty(data1)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data1.orderCarId,
										orderCarCode: data1.orderCarCode,
										estimatedDeliveryTime: data1.estimatedDeliveryTime,
										orderId: data1.orderId,
									},
								};
							}
							break;
						// 首期租金 子订单
						case '2':
							let data2 = await this.getOrderCar(earnId);
							if (this.notEmpty(data2)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data2.orderCarId,
										orderCarCode: data2.orderCarCode,
										estimatedDeliveryTime: data2.estimatedDeliveryTime,
										orderId: data2.orderId,
									},
								};
							}
							break;

						// 尾款 子订单
						case '3':
							let data3 = await this.getOrderCar(earnId);
							if (this.notEmpty(data3)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data3.orderCarId,
										orderCarCode: data3.orderCarCode,
										estimatedDeliveryTime: data3.estimatedDeliveryTime,
										orderId: data3.orderId,
									},
								};
							}
							break;
						// 处置款
						case '4':
							if (this.notEmpty(row.vehicleDisposalNo)) {
								route = {
									name: 'RoutineHandleDetails',
									query: {
										type: 'view',
										path: 'RoutineHandleList',
										id: row.vehicleDisposalId,
										flowId: row.flowId,
										vehicleDisposalNo: row.vehicleDisposalNo,
									},
								};
							}
							break;
						// 违约金
						case '5':
							let data5 = await this.getOrderParam(earnCode);
							if (this.notEmpty(data5)) {
								route = {
									name: 'OrderDetails',
									query: {
										type: data5.carType,
										orderId: data5.orderId,
										calcSchemeId: data5.calcSchemeId,
									},
								};
							}
							break;
						// 合同保证金 主订单
						case '6':
							let data6 = await this.getOrderParam(earnCode);
							if (this.notEmpty(data6)) {
								route = {
									name: 'OrderDetails',
									query: {
										type: data6.carType,
										orderId: data6.orderId,
										calcSchemeId: data6.calcSchemeId,
									},
								};
							}
							break;
						// 违章保证金 主订单
						case '7':
							let data7 = await this.getOrderParam(earnCode);
							if (this.notEmpty(data7)) {
								route = {
									name: 'OrderDetails',
									query: {
										type: data7.carType,
										orderId: data7.orderId,
										calcSchemeId: data7.calcSchemeId,
									},
								};
							}
							break;

						// 违章费用
						case '8':
							var data = await this.getOrderCar(earnId);
							if (this.notEmpty(data)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data.orderCarId,
										orderCarCode: data.orderCarCode,
										estimatedDeliveryTime: data.estimatedDeliveryTime,
										orderId: data.orderId,
									},
								};
							}
							break;
						// 滞纳金
						case '9':
							var data = await this.getOrderCar(earnId);
							if (this.notEmpty(data)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data.orderCarId,
										orderCarCode: data.orderCarCode,
										estimatedDeliveryTime: data.estimatedDeliveryTime,
										orderId: data.orderId,
									},
								};
							}
							break;
						// 加速折旧费
						case '10':
							var data = await this.getOrderCar(earnId);
							if (this.notEmpty(data)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data.orderCarId,
										orderCarCode: data.orderCarCode,
										estimatedDeliveryTime: data.estimatedDeliveryTime,
										orderId: data.orderId,
									},
								};
							}
							break;
						// 超里程费
						case '11':
							var data = await this.getOrderCar(earnId);
							if (this.notEmpty(data)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data.orderCarId,
										orderCarCode: data.orderCarCode,
										estimatedDeliveryTime: data.estimatedDeliveryTime,
										orderId: data.orderId,
									},
								};
							}

							break;
						// 自定义扣款项
						case '12':
							var data = await this.getOrderCar(earnId);
							if (this.notEmpty(data)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data.orderCarId,
										orderCarCode: data.orderCarCode,
										estimatedDeliveryTime: data.estimatedDeliveryTime,
										orderId: data.orderId,
									},
								};
							}
							break;
						// 客户理赔款
						case '13':
							var data = await this.getOrderCar(earnId);
							if (this.notEmpty(data)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data.orderCarId,
										orderCarCode: data.orderCarCode,
										estimatedDeliveryTime: data.estimatedDeliveryTime,
										orderId: data.orderId,
									},
								};
							}
							break;

						// 处置违约金
						case '14':
							var data = await this.getOrderCar(earnId);
							if (this.notEmpty(data)) {
								route = {
									name: 'SuborderDetail',
									query: {
										id: data.orderCarId,
										orderCarCode: data.orderCarCode,
										estimatedDeliveryTime: data.estimatedDeliveryTime,
										orderId: data.orderId,
									},
								};
							}
							break;
						default:
							this.$modal.closeLoading();
							setTimeout(() => {
								this.$message.error(`未配置${row.proceedsTypeStr}跳转`);
							}, 800);
							break;
					}
					this.$modal.closeLoading();
					if (this.notEmpty(route)) {
						this._toPage(route);
					}
				} catch (error) {
					this.$message.error('未查找到相关订单信息！');
					this.$modal.closeLoading();
				}
			},
			getInfoData() {
				this.loading = true;
				let id = this.$route?.query?.id;
				apis?.Info(id)
					.then(async res => {
						if (res.code == 200) {
							this.infoData = res.data;
							this.table.collection.dataList = res.data.earningStreamList;
							// for (
							//     let index = 0;
							//     index < this.infoData?.proceedsInvoiceList?.length;
							//     index++
							// ) {
							//     const element =
							//         this.infoData.ProceedsInvoiceList[index];
							//     if (element?.imgId) {
							//         await listByIds(element?.imgId).then((res) => {
							//             element.__imgUrl = res.data?.[0]?.url ?? "";
							//         });
							//     }
							// }
						}
					})
					.finally(() => {
						this.loading = false;
					});
			},
			// 预览图片
			previewImage(urls) {
				console.log(urls);
				this._previewImages(urls);
			},

			back() {
				this.$tab.closeOpenPage(this.$route);
				this._toPage({ path: '/finance/collect' });
			},
		},
	};
</script>
<style lang="scss" scoped>
	.chunk {
		overflow: hidden;
		background-color: #fff;
		border-radius: 4px;
		padding: 15px 20px;
		margin: 20px;
		box-sizing: border-box;
		.title {
			border-bottom: 1px solid #e9e9e9;
			padding-bottom: 15px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
			line-height: 22px;
			text-align: left;
			font-style: normal;
		}
		.container_table {
			margin-top: 18px;
		}
	}
	.empty {
		font-size: 14px;
		text-align: center;
		padding: 20px;
	}
	.back {
		margin: 20px;
		background: #fff;
		padding: 15px 20px;
		display: flex;
		justify-content: flex-end;
	}
	.containerBox {
		display: flex;
		.container {
			min-width: 0;
			flex: 1;
		}
	}
	.container_invoice {
		display: flex;
		margin-bottom: 15px;
		.preview {
			flex: 1;
			// width: 300px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.container_preview {
				padding: 25px 0;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// margin-top: 25px;
				width: 180px;
				.image {
					aspect-ratio: 16/9;
				}
				.handleBtn {
					display: flex;
					justify-content: space-around;
				}
			}
		}
	}
	.container_invoice {
		margin: 20px 0;
		display: grid;
		grid-template-columns: 1fr 2fr;
		border: 4px;
		.container_content {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			.item {
				display: flex;
				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 14px;
					color: #8c8c8c;
					line-height: 20px;
					text-align: left;
					font-style: normal;
					width: 100px;
				}
				.content {
					flex: 1;
					min-width: 0;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 14px;
					color: #333333;
					line-height: 20px;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}
	::v-deep .component-upload-image {
		margin-right: 0;
	}
	div:empty::before {
		content: '-';
	}
	.reasonForFailure {
		max-width: 200px;
	}
</style>
